<template>
  <div>

      <mh :total="totalCount()"></mh>

    <main class="" id="main-collapse">
      <div>
      
      
        <!--面包屑导航 通过：进行传参操作-->
        <bread :datas='this.datas'></bread>

        <br /><br />

        <h1>{{ title }}</h1>

        <br /><br />

        <p>{{ desc }}</p>

        <br /><br />

        <p></p>
        

        <img :src="src">

        <br /><br /><br />

        <!-- 关注数 -->

        用户关注数 : {{ flow }}

        <br /><br />

        <!-- 评论区域 -->

        <div v-for="item in commentlist">

          {{ item.content }}

        </div>

        <br /><br />

        <Form :label-width="110">


          <!-- 关注按钮 -->

          <FormItem label="关注">

            <div>

              <h-switch  v-model="myflow" @change="mychange" >是否关注</h-switch>


            </div>

          </FormItem>


          <!-- 价格 -->

          <FormItem label="价格">

              <div>
  
               {{ price }}

               &nbsp;&nbsp;

               <Button color="primary" @click="add_cart(title,id,price)" >加入购物车</Button>

               {{ totalCount() }}
  
  
              </div>
  
            </FormItem>



          <FormItem label="评论">

            <textarea rows='10' v-autosize v-wordcount="50" v-model="comment">


            </textarea>



          </FormItem>

          <FormItem>

            <Button @click="submit" >提交评论</Button>

          </FormItem>


        </Form>
      
    
      </div>
    
    </main>

    

  

  </div>
</template>


 
<script>


import mh from './mh.vue'
//导入面包屑导航组件
import bread from './bread.vue'

export default {
  data () {
    return {
      msg: "这是一个变量",
      //面包屑变量
      datas:[{title:'首页',route:{name:'index'}},{title:'当前课程'}],
      title:'',
      desc:'',
      flow:0,
      src:'',
      price:0,
      myflow:false,
      comment:'',
      id:0,
      total:0,
      commentlist:[],
      //购物车变量
      datalist:[]
      
    }
  },
  components: {
        'mh':mh,
        //声明标签
        'bread':bread
  },
  mounted:function(){

      //接收参数
      var id = this.$route.query.id;
      console.log(id);
      //赋值
      this.id = id;

      var cardata = localStorage.getItem('cart');
      //判断用户是否首次访问
      if(cardata==null){
        //首次用户，定义空容器，用于添加购物车
        var cartlist = [];
      }else{

        //将字符串转换通用类型
        var cartlist = JSON.parse(cardata);
      }

      this.datalist = cartlist;

      //获取关注状态

      //使用箭头函数
      this.axios.get('http://localhost:8000/getflow/',{params:{cid:id,uid:localStorage.getItem("uid")}}).then((result) => {

      console.log(result);

      if(result.data.status == 1){

        this.myflow = true;


      }else{

        this.myflow = false;

      }

      

      });


      //使用箭头函数
      this.axios.get('http://localhost:8000/singlecourse/',{params:{id:id}}).then((result) => {

        console.log(result);

        //赋值
        this.title = result.data.title;
        this.desc = result.data.desc;
        this.flow = result.data.flow;
        this.price = result.data.price;
        this.src = 'http://localhost:8000/static/upload/'+result.data.img;
        this.datas[1].title = result.data.title;

    });


      //获取评论列表
      //使用箭头函数
      this.axios.get('http://localhost:8000/commentlist/',{params:{id:id}}).then((result) => {

          console.log(result);

          //赋值
          this.commentlist = result.data;

          });

},
  methods:{

    //计算购物车数量
    totalCount:function(){

      var total = this.datalist.length-1;

      var cartlist = this.datalist;

      //遍历
      for(let i = 0,l=cartlist.length;i<l;i++){
            //累加总数
            total+=cartlist[i].num;

      }

      //返回总数
      return total;

    },
    //添加购物车逻辑
    add_cart:function(title,id,price){

      //初始化购物车
      var cardata = localStorage.getItem('cart');
      //判断用户是否首次访问
      if(cardata==null){
        //首次用户，定义空容器，用于添加购物车
        var cartlist = [];
      }else{

        //将字符串转换通用类型
        var cartlist = JSON.parse(cardata);
      }
      //进行添加逻辑
      var findcourse = 0;
      for(let i=0,l=cartlist.length;i<l;i++){

        //判断是否找到课程
        if(title == cartlist[i]['title']){

            //如果找到该课程就结束循环
            cartlist[i]['num']++;
            findcourse = 1;
            break;
        }

      }
      //如果没找到该课程，则新加入
      if(findcourse==0){

        cartlist.push({title:title,price:price,id:id,num:1})

      }
      //立即存储购物车数据
      this.datalist = cartlist;
      localStorage.setItem('cart',JSON.stringify(cartlist));

    },
    //关注按钮
    mychange(){

      console.log(this.myflow);
      
      if(this.myflow == true){

          var myflow = "1";
          this.flow++;
      }else{

          var myflow = "0";
          this.flow--;
      }

      let uid = localStorage.getItem("uid");
      let cid = this.id;

      console.log(uid);
      console.log(cid);

      //请求后台接口
      //使用箭头函数
      this.axios.get('http://localhost:8000/flowsinsert/',{params:{uid:uid,cid:cid,myflow:myflow}}).then((result) => {

        console.log(result);

        });



    },
    submit(){

      //判断
      if(this.comment == ""){

        this.$Message('评论不能为空');
        return false;

      }

      //请求后台接口
      //定义一个传递变量
      var _this = this;
      this.axios.post('http://localhost:8000/commentinsert/',this.qs.stringify({
          //设置参数
              content:this.comment,
              cid:this.id
      })).then(function(result){
          
          _this.$Message(result.data.message);

          //构造评论数据
          let comment = {id:0,cid:_this.id,content:_this.comment};
          _this.commentlist.push(comment);

      });


    }
  }
}


</script>
 
<style>



</style>